<!DOCTYPE html>
<!--index.html
要求：介绍联乐人生系统、推广传统文化、介绍对联知识
制作者：徐丽杭
时间：5.6
版本：1.0
-->
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>联乐人生对联系统-首页</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
    <link rel="canonical" href="http://www.example.com/">
    -->

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <link href="assets/css/style.css" rel="stylesheet" media="screen" />
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(docuement).ready(function(){
        $("#index").addClass("active");
    })
    </script>
</head>

<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a
        href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    以获得更好的体验！</p>
<![endif]-->

<div class="main">
    <div class="content">
        <div class="header">
            <div class="header_resize">
                <div class="logo">
                    <div class="logoHead"></div>
                    <div class="logomain"></div>
                    <div class="logoEnd"><div class="line"></div></div>
                </div>
                <!--导航-->
              <?php include("cludefile/nav.php");?>
                <!--导航结束-->
                <div class="clr"></div>
            </div>
        </div>
        <!--头部区结束,主题内容区开始-->
        <div  class="maincontent">
            <div class="intro-left">
                <p>联乐人生对联生成系统是由杭州师范大学潘志庚老师带领的小组研发的计算机自动生成对联系统。当用户输入个人信息时，它能自动生成嵌字对联。除了这个基本功能以外，联乐人生对联系统还有如下特色：</p>
                <ul>
                    <li>
                        <span><img src="images/intro1.gif" alt="" /></span><p>当用户输入任意名字及性别后，系统会自动生成与名字相关的春联。</p>
                    </li>
                    <li>
                        <span><img src="images/intro2.gif" alt="" /></span><p>当用户输入任意名字、性别及年龄后，系统会自动生成与名字相关的庆生寿联。</p>
                    </li>
                    <li>
                        <span><img src="images/intro3.gif" alt="" /></span><p>当用户输入任意两个名字、性别及年龄后，系统会自动生成与两人名字相关的喜联，<br />并且用户可以将婚纱照放入其中，保存成特殊的结婚礼物。</p>
                    </li>
                    <li>
                        <span><img src="images/intro4.gif" alt="" /></span><p>当用户输入任意名字、性别及年龄后，系统会利用成语生成别出心裁的成语对联。</p>
                    </li>
                    <li>
                        <span><img src="images/intro5.gif" alt="" /></span>
                        <p>当您完成一幅对联后，我们的系统提供了将您的对联装裱成一张图片的功能。<br /> 您可以选择喜欢的字体和背景来装裱生成的对联，最后将生成的图片发送给朋友或者存为手机桌面。</p>
                    </li>
                </ul>
                <p class="text-center">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                        生成对联
                    </button>
                </p>

                <!--模态框内容-->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">生成对联</h4>
                            </div>
                            <div class="modal-body">

                                <form class="form-inline">
                                    <div class="alert alert-danger" id="namealert" role="alert" style="display: none">
                                        <p>请输入两个字或者三个字的名字</p>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">姓名</label>
                                        <input type="text" class="form-control"
                                               name="name" id="name" minlength="2"  required placeholder="您的姓名"/>

                                    </div>
                                    <div class="form-group" id="name2-div" style="display: none">
                                        <label for="name2">第二人姓名</label>
                                        <input type="text" class="form-control"
                                               name="name" id="name2" minlength="2"  required placeholder="第二人的姓名"/>

                                    </div>
                                    <div class="form-group">
                                        <label>性别</label>
                                        <div class="radio">
                                            <label class="checkbox-inline">
                                                <input type="radio" name="sex" value="男" checked>
                                                男
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label class="checkbox-inline">
                                                <input type="radio" name="sex" value="女">
                                                女
                                            </label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label for="age">年龄</label>
                                                <select class="form-control" id="age">
                                                    <option value="1">1</option>
                                                    <option value="10">10</option>
                                                    <option value="20">20</option>
                                                    <option value="30">30</option>
                                                    <option value="40">40</option>
                                                    <option value="50">50</option>
                                                    <option value="60">60</option>
                                                    <option value="70">70</option>
                                                    <option value="80">80</option>
                                                </select>
                                            </div>
                                            <div class="form-group" id="job-div" style="display: none">
                                                <label for="job">职业</label>
                                                <select class="form-control" id="job">
                                                    <option value="医生">医生</option>
                                                    <option value="教师">教师</option>
                                                    <option value="科研">科研</option>
                                                    <option value="机关">机关</option>
                                                    <option value="警察">警察</option>
                                                    <option value="商业">商业</option>
                                                    <option value="学生">学生</option>
                                                    <option value="酒店">酒店</option>
                                                    <option value="宾馆">宾馆</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="type">对联类型</label>
                                                <select class="form-control" id="type">
                                                    <option value="1">嵌名对联</option>
                                                    <option value="2">庆生对联</option>
                                                    <option value="3">职业对联</option>
                                                    <option value="4">双名对联</option>
                                                    <option value="tupian">图片装裱</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </form>

                                <div id="couplets">
                                    <!--此处为Ajax填充生成的对联结果-->
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" id="close" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" id="generate">生成</button>
                            </div>
                        </div>
                    </div>
                </div>



            </div>
            <!--右边内容-->
            <div class="sidebar">
                <h2 class="star"><span>使用须知</span> </h2>
                <ul class="sb_menu">
                    <li><a href="">扫描二维码</a></li>
                    <li><a href="">新浪微博</a></li>
                    <li><a href="">联系我们</a></li>
                    <li><a href=""><img src="images/erweima.gif" alt="" /></a></li>
                </ul>
            </div>
        </div>
        <div class="cc"></div>
        <!--主题内容区结束，页脚区开始-->
       <?php include("cludefile/footer.php");?>
        <!--页脚区内容结束-->
    </div>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="./assets/js/jquery.validate.min.js"></script>

<script>
    $(document).ready(function(){
        $("#name").focusout(function () {
            if($("#name").val().length < 2 || $("#name").val().length > 3)
            {
                $("#namealert").fadeIn();
                $("#generate").attr('disabled','disabled');
            }
            else
            {
                $("#namealert").fadeOut();
                $("#generate").removeAttr('disabled');
            }
        });

        $("#type").change(function(){
            $("#job-div").fadeOut();
            $("#name2-div").fadeOut();
            if($("#type").val() == 3)
            {
                $("#job-div").fadeIn();
            }
            if($("#type").val() == 4)
            {
                $("#name2-div").fadeIn();
            }
            else
            {

            }
        })
        $('#close').click(function(){
            $('#couplets').html("");
            $('#name').val('');
            $('#age').val('');
        });
        $('#generate').click(function(){

            $('#couplets').empty();
            var name = $('#name').val();
            var sex = $('input[type=radio][checked]').val();
            var age = $('#age').val();
            var type = $('#type').val();
            var name2 = $('#name2').val();
            var job = $('#job').val();

            $.get("couplet.php",{name: name,sex: sex,age: age,type: type,name2: name2,job: job })
                    .done(function(data) {
                        $("#generate").removeAttr('disabled');
                        $('#couplets').empty();
                        var couplets = data.split('|');
                        $.each(couplets,function(n,value) {
                            if (n == 0) {
                                $('#couplets').append("<hr /><h2>"+value+"</h2>");
                            } else {
                                $('#couplets').append("<li>"+value+"</li>");
                            }
                        });
                    });
        })

        $( document ).ajaxStart(function() {
            $( "#couplets" ).text( "正在生成，请稍等..." );
            $("#generate").attr('disabled','disabled');
        });

    })
</script>
</body>
</html>
